<template>
    <section>
        <section :class="['utils-sticky-btns', {'scrolled': showGoTop}]">
            <a href="#" @click="goTop($event)">
                <span>
                    <i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i>
                </span>
            </a>
        </section>
    </section>
</template>

<script>
export default {
    props: {
        /*
         * 返回顶部可用参数
         */
        scrollParam: {
            type: Object,
            default () {
                return {
                    // 回到顶部的方式 0 - 马上回到顶部，css实现（默认） 1 - 匀速回到顶部，js实现
                    way: 0,
                    // 滚动多少像素显示“回到顶部”图标
                    distance: 20,
                    // 向上滚动间隔
                    time: 600,
                    // 运动方式
                    sportWay: 'Quad',
                    // 缓急方式
                    slowWay: 'easeIn',
                    // 回到顶部后回调方法
                    callback: undefined
                }
            }
        }
    },
    data () {
        return {
            // 操作element的方法
            elUtils: this.$util.element,
            // 操作event的方法
            evUtils: this.$util.event,
            // 是否展示“回到顶部”图标
            showGoTop: false
        }
    },
    computed: {
    },
    mounted () {
        this.computeScroll()
    },
    methods: {
        // 回到顶部
        goTop (e) {
            let self = this
            e = self.evUtils.getEvent(e)
            if (self.scrollParam.way === 0) {
                return
            }
            let sp = self.scrollParam
            self.evUtils.preventDefault(e)
            self.elUtils.constantSpeedToTop(self.elUtils.getDomScrollTop(), sp.time, sp.sportWay, sp.slowWay, sp.callback)
        },
        // 计算滚动条位置
        computeScroll () {
            let self = this
            self.evUtils.addHandler(window, 'scroll', function () {
                self.showGoTop = self.elUtils.getDocScrollTop() >= self.scrollParam.distance
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.utils-sticky-btns.scrolled{
    right: 3px;
}
.utils-sticky-btns{
    position: fixed;
    z-index: 50;
    right: -48px;
    bottom: 10px;
    -webkit-transition: right .3s ease;
    transition: right .3s ease;
}

.utils-sticky-btns a{
    text-decoration: underline;
    color: #ff712c;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.utils-sticky-btns span{
    display: block;
    float: left;
    width: 42px;
    height: 42px;
    text-align: center;
    font-size: 1.25em;
    color: #fff;
    background: #ff712c;
    border-radius: 4px;
    padding-top: 6px;
    margin: 0 5px;
    cursor: pointer;
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
}

.utils-sticky-btns span:hover{
    background: #f85100;
}
</style>